<template>
  <div id="app" class="page">
    <router-view :isFixed="isFixed"></router-view>
    <div id="container"></div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return { isFixed: false, timeout: null };
  },
  mounted() {
    window.addEventListener("scroll", this.scrollHandle);
    window.addEventListener("resize", this.scrollHandle);
    window.addEventListener("pageshow", this.scrollHandle);
  },
  beforeDestroy() {
    this.timeout && clearTimeout(this.timeout);
    window.removeEventListener("scroll", this.scrollHandle);
    window.removeEventListener("resize", this.scrollHandle);
    window.removeEventListener("pageshow", this.scrollHandle);
  },
  methods: {
    scrollHandle(e) {
      const that = this;
      that.timeout && clearTimeout(that.timeout);
      that.timeout = setTimeout(function () {
        let top = (document.documentElement || document.body).scrollTop;
        if (top > 60) {
          that.isFixed = true;
        } else {
          that.isFixed = false;
        }
      }, 250);
    },
  },
};
</script>

<style lang="scss">
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  body {
    font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
      "Lucida Sans", Arial, sans-serif;
    font-size: 16px;
    background-color: var(--white);
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    a {
      color: #333333;
      text-decoration: none;
    }
    .page {
    }
  }
  body,
  ol,
  li,
  ul,
  p {
    padding: 0;
    margin: 0;
    list-style: none;
  }
}
</style>
